<template>
  <div class="yourlikeContainer">
    <p class="title">
      <img src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt />
      猜你喜欢
    </p>
    <div class="item" v-for="item in likelist" :key = "item.ttt">
      <div class="top">
        <span
          style="background:url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png)"
        >随买随用</span>
      </div>
      <img
        :src="item.imgUrl"
        alt
      />
      <div class="content">
        <p class="item-title">{{item.title}}</p>
        <p class="item-content">
          <span class="xx">★★★★★</span>
          <span class="pl">{{item.ttt}}条评论</span>
        </p>
        <p class="item-xz">
          <span class="item-pirce">￥{{item.desc}}元 <a style="color:#616161;">起</a></span>
          <span class="xz">{{item.dz}}</span>
        </p>
      </div>
    </div>
  <div class="footer">
    <p>查看更多产品</p>
  </div>
  </div>
</template>
<script>
export default {
    props:['likelist']
};
</script>
<style lang="less" scoped>
@font :100px;
.yourlikeContainer {
  background: #fff;
  margin-top: 10px;
  .footer{
    width: 100%;
    height:40rem/@font;
    p{
      text-align:center;
      line-height:40rem/@font;
      font-size:15rem/@font;
      color:#32abc5;
    }
  }
  .title {
    font-size: 15rem / @font;
    img {
      width: 15rem / @font;
      height: 15rem / font;
    }
  }
  .item {
    font-size: 12rem / @font;
    display: flex;
    margin-top:15rem/@font;
    .top {
      position: relative;
      span {
        position: absolute;
        width: 51rem / @font;
        height: 19rem / @font;
        text-align: center;
        line-height: 19rem / @font;
        color: #fff;
      }
    }
    img {
      width: 100rem / @font;
      height: 100rem / @font;
      // display:block;
    }
    .content {
        margin-left:15rem/@font;
        padding-top:10rem/@font;
        font-size:13rem/@font;
        color:#616161;
      .item-title {
          font-size:16rem/@font;
          color:#000;
      }
      .item-content {
              padding-top:10rem/@font;
        .xx {
            color:#FFB436;
            font-size:14rem/@font;
        }
        .pl {
            padding-left:30rem/@font;
        }
      }
      .item-xz {
              padding-top:10rem/@font;
              display: flex;
              justify-content:space-between;
        .item-pirce {
                color:orange;
        }
        .xz {
        }
      }
    }
  }
}
</style>
